<template>
<div class="cover">

</div>
  <div class="body">
    <div class="left"></div>
    <div class="right">
      <!-- 个人详情 -->
      <div class="myBoxCard">
        <div class="avatar">
          <img src="@img/home/bjt.jpg">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style lang="scss" scoped>
$imgPath:"@/assets/imgs/home/";
.cover{
    width: 100%;
    height: 400px;
    background: url($imgPath + "heardBg.jpeg") no-repeat;
    background-size: 100%;
}
.body{
  width: 100%;
  min-height: calc(100% - 400px);
  display: flex;
  .left{
    width: calc(100% - 400px);
    height: 100%;
  }
  .right{
    width: 400px;
    height: 100%;
    padding: 40px 40px 10px 10px;
    .myBoxCard{
      width: 100%;
      height: 400px;
      background: red;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 40px;
      .avatar{
          width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
